<script setup lang="ts">
import { reactive } from 'vue'
const person = reactive({
  name: 'xxx',
  color: 'sss',
  bark: () => {
    console.log('xxx')
  }
})
</script>

<template>
  <div>{{ person.name }}</div>
  <h1 @click="person.color = person.color + '!'">{{ person.color }}</h1>
  <button @click="person.bark">bark</button>
</template>

<style scoped></style>
